<template>
  <div>
   <table>
    <tr class="p"> <span class="iconfont">&#xe64e;</span> </tr>
    <tr class="name" @click="chooseAddress(good)">{{address.rname}}</tr>
    <tr class="num" @click="chooseAddress(good)">{{address.rphone}}</tr>
    <tr class="address" @click="chooseAddress(good)">{{address.raddress}}</tr>
    <!--<tr class="choose" >选择地址</tr>-->
    <tr class="line"></tr>
     <tr class="name1">{{good.mname}}</tr>
    <tr class="img-wrapper">
     <td><img :src="good.gimg"></td>
     <td class="word" >{{good.gname}}</td>
    </tr>
    <tr class="left1">配送方式</tr>
    <tr class="num1">快递 免邮</tr>
    <tr class="left2">购买数量</tr>
    <tr class="num2">1</tr>
    <tr class="left3">总计</tr>
    <tr class="num3">¥ {{good.price}}</tr>
    <tr class="footer" @click="buy(good.mid)"><a>付款</a></tr>
   </table>

  </div>
</template>

<script >
  import {findDefaultAddress,creatNewOrder} from '@/api/user'

  export default {
    name: 'NewOrder',
    data() {
      return {
        good:{
          gid:'',
          mid:'',
          price: '',
          gimg: '',
          gdescribe:'',   //商品详情
          ginventory:'', //库存
        },
        address:{
          rphone: '',
          raddress: '',
          rname: '',
        },
        fromPath: "",
        path:'',
      }
    },
    methods: {
      //查询默认地址
      selectDefaultAddress(){
        findDefaultAddress({
          uid: this.$store.state.user.uid,
        }).then((res)=>{
            this.address=res.data;
        })
      },
      //选择地址
      chooseAddress(good){
        this.$router.replace({
          path: '/UserAllAddress',
          query:{
            good:good,
            path:this.$route.path,
          }
        })
      },
      //付款生成订单
      buy(mid){
        creatNewOrder({
          uid: this.$store.state.user.uid,
          gid: this.good.gid,
          mid: this.good.mid,
          oName: this.address.rname,
          oPhone: this.address.rphone,
          oAddress: this.address.raddress,
        }).then((res)=>{
          if (res.data.code===200){
            this.$router.replace({
              path:'/BuySuccess',
              query:{
                mid:mid,
              }
            });
          }
        }).catch(res=>{
          alert("购买失败，请重试")
        })
      }
    },
    created () {
      this.good=this.$route.query.good;
      //如果是从地址列表页面来的
      if (this.$route.query.path==='/UserAllAddress'){
        this.address=this.$route.query.address;
      }else {
        //查询用户默认地址
        this.selectDefaultAddress();
      }
    },
  }
</script>

<style scoped>
/* 地址图标的引入路径 */
 @font-face {
  font-family: 'iconfont';  /* Project id 2889610 */
  src: url('//at.alicdn.com/t/font_2889610_mp1sgypd24.woff2?t=1635125451230') format('woff2'),
       url('//at.alicdn.com/t/font_2889610_mp1sgypd24.woff?t=1635125451230') format('woff'),
       url('//at.alicdn.com/t/font_2889610_mp1sgypd24.ttf?t=1635125451230') format('truetype');
}
/* 地址图标样式 */
.iconfont {
  font-family: "iconfont" !important;
  font-size: 45px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: rgb(245, 212, 142);
}
/* 图片的位置 */
.p{
  /* 图片位置是绝对的 */
 position:absolute;
 /* 距离顶部的距离 */
 top:5%;
}
/* 顾客姓名 */
.name{
 position: absolute;
/* 距离左端的距离 */
 left: 20%;
  /* 距离顶部的距离 */
 top:5%;
}
/* 顾客手机号 */
.num{
  position: absolute;
  left: 50%;
  top:5%;
}
/* 地址 */
.address{
  position: absolute;
  margin-top: 15%;
  left: 20%;
}
/* 选择地址按钮 */
.choose{
  position: absolute;
  top: 15%;
  left: 75%;
  background-color: rgb(245, 212, 142);
  color: white;
  padding: 8px 4px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 2px;
  margin: 1px 1px;
  -webkit-transition-duration: 0.4s;
  transition-duration: 0.4s;
  cursor: pointer;

}
/* 商店名字 */
.name1{
  position: absolute;
  float: left;
  margin-top:35% ;
  width: 100%;
  /*border-top-color:1px solid orange;*/
}
/* 图片容器 */
.img-wrapper{
  /* 容器长度 */
  width: 50%;
  /* 距离下内边距的距离 */
  padding-bottom: 20rem;
  /* 左浮动 */
  float:left;
  margin-right: 50%;
}

/* 容器内图片 */
.img-wrapper img{
  /* 位置绝对 */
  position: absolute;
  top: 25%;
  width:50%;
  height:10rem;
  float: left;
  margin-right: 50%;
}
/* 详情介绍的字体大小 */
.word{
  font-size: 1rem;
  position: absolute;
  left: 10.5rem;
  height:50rem;
  float:left;
  margin-top:50% ;
}
/* 快递免邮的字体大小颜色 */
.num1{
  position: absolute;
  font-size: 1rem;
  color: rgb(184, 36, 36);
  width: 30%;
  margin-left: 70%;
  margin-top: 20rem;
}
/* 数字1 */
.num2{
  position: absolute;
  font-size: 1rem;
  color: rgb(184, 36, 36);
  width: 30%;
  margin-left: 70%;
  margin-top: 22rem;
}
/* 价格 */
.num3{
  position: absolute;
  font-size: 1rem;
  color: rgb(184, 36, 36);
  width: 30%;
  margin-left: 70%;
  margin-top: 24rem;
}
/* 配送方式 */
.left1{
  position:absolute;
  margin-top: 20rem;
  font-size: 1rem;
  width: 50%;
}
/* 购买数量 */
.left2{
  position:absolute;
  margin-top: 22rem;
  font-size: 1rem;
  width: 50%;
}
/* 总计 */
.left3{
  position:absolute;
  margin-top: 24rem;
  font-size: 1rem;
  width: 50%;
}
/* 待支付按钮 */
.footer{
    position:absolute;
    left: 35%;
    background-color: rgb(245, 212, 142);
    color: white;
    padding: 16px 32px;
    text-align: center;
    /* 表示文本没有下划线 */
    text-decoration: none;
    /* 行内块状元素 */
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    /* 过渡效果持续0.4秒 */
    -webkit-transition-duration: 0.4s;
    transition-duration: 0.4s;
    cursor: pointer;
    top:75%;
}
</style>
